<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
		*{margin: 0;padding: 0;}
		.box{
			width: 1200px;
			height: 500px;
			margin: 0 auto;
		}
		.box div{
			width: 350px;
			height: 500px;
			margin: 0 20px;
			overflow: auto;
			border: 1px solid #ccc;
			float: left;
			text-align: center;
		}
		ul{list-style: none;}
		ul li{
			width:90%;padding:5px 0;background:pink;margin:5px auto;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="left">
			<p>省份</p>
		</div>
		<div class="center">
			<p>城市</p>
		</div>
		<div class="right">
			<p>地区</p>
		</div>
	</div>
</body>
</html>
<!-- <script src="js/js.js"></script> -->
<script>
	// console.log(data)
	// function $(sel){return document.querySelector(sel)}
	// function gets(sel){return [...document.querySelectorAll(sel)]}
    
    // function getData(url,method,data,fn){//这个方法是封装起来进行ajax数据传递的；
    //     let xhr=new XMLHttpRequest();
    //     xhr.open(method,url);
    //     xhr.send(data);
    //     xhr.onreadystatechange=function(){
    //         if(xhr.readyState===4&&xhr.status===200){
    //            fn(JSON.parse(xhr.responseText))
    //         }
    //     }
    // }
    // //默认数据获取；
    // getData('/index','GET',null,function(dat){
    //     console.log(dat)
	// })
	

	// function createList(ptag,ctag,data){
	// 	var parent=document.createElement(ptag)
	// 	for(var i=0;i<data.length;i++){
	// 		var child=document.createElement(ctag)
	// 		child.innerHTML=data[i].name
	// 		if(typeof data[i]==='string'){
	// 		    child.innerHTML=data[i]
	// 		}else{
	// 		    child.innerHTML=data[i].name;
	// 		}
	// 		parent.appendChild(child)
	// 	}
	// 	return parent;
	// }
	
	// $('.left').appendChild(createList('ul','li',data))
	// var zlist=gets('.left li')
	// zlist.forEach(function(item,i){
	// 	item.onclick=function(){
	// 		if($('.center ul')){
	// 			$('.center').removeChild($('.center ul'))
	// 		}
	// 		$('.center').appendChild(createList('ul','li',data[i].city))
	// 		city(gets('.center li'),data[i].city)
	// 	}
	// })
	
	//  function city(list,data){
	//         list.forEach(function(item,index){
	//             item.onclick=function(){
	//                 console.log(data[index].area)//得到所有的区名，我们要创建区列表；
	//                 if($('.right>ul')){
	//             $('.right').removeChild($('.right>ul'))
	//         }
	//        $('.right').appendChild(createList('ul','li',data[index].area))
	//             }
	//         })
	//    } 
	// function createlist(p,c,data){
	// 	var parent=document.createElement(p)
	// 	for(var i=0;i<data.length;i++){
	// 		var child=document.createElement(c)
	// 		if(typeof data[i]==='string'){
	// 			child.innerHTML=data[i]
	// 		}else{
	// 			child.innerHTML=data[i].name
	// 		}
	// 		parent.appendChild(child)
	// 	}
	// 	return parent;
	// }
	// $('.left').appendChild(createlist('ul','li',data)) 
	
	// var zlist=gets('.left li')
	// zlist.forEach(function(item,i){
	// 	item.onclick=function(){
	// 		if($('.center ul')){
	// 			$('.center').removeChild($('.center ul'))
	// 		}
	// 		$('.center').appendChild(createlist('ul','li',data[i].city)) 
	// 		city(gets('.center li'),data[i].city)
	// 	}
	// })
	// function city(list,data){
	// 	list.forEach(function(item,i){
	// 		item.onclick=function(){
	// 			if($('.right ul')){
	// 				$('.right').removeChild($('.right ul'))
	// 			}
	// 			$('.right').appendChild(createlist('ul','li',data[i].area)) 
	// 		}
			
	// 	})
	// }
</script>